<template>
  <div class="divBox">
    <div class="echarts-box" id="echarts" ref="visitChart"></div>
    <el-date-picker class="date-picker-form-box" v-model="timeVal" style="width: 240px" value-format="yyyy-MM-dd"
      type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
      @change="requestForGetStaticData" />
  </div>
</template>
<script>
import { getStatisticsByDate } from '@/api/dashboard';
import * as echarts from 'echarts'
export default {
  components: {},
  data () {
    return {
      timeVal: [], // 选择时间
      myChart: null, // echarts
      options: {
        legend: {
          data: ['新增用户数', '调查问卷']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
    }
  },
  mounted () {
    // 初始化echarts
    this.myChart = echarts.init(document.getElementById('echarts'));

    // 初始化时间区间
    this.initTimeVal();
    // 接口请求统计数据
    //this.requestForGetStaticData();
  },
  methods: {
    // 监听页面宽度变化，刷新表格
    handleResize () {
      this.$refs.visitChart.handleResize();
    },
    // 格式化日期为 yyyy-MM-dd
    formatDate (date) {
      const yyyy = date.getFullYear();
      const MM = (date.getMonth() + 1).toString().padStart(2, '0');
      const dd = date.getDate().toString().padStart(2, '0');
      return `${yyyy}-${MM}-${dd}`;
    },
    // 初始化时间区间
    initTimeVal () {
      // 获取当日日期
      const today = new Date();
      const todayFormatted = this.formatDate(today);
      console.log("当日日期:", todayFormatted);

      // 获取昨日日期
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1); // 设置为昨日
      const yesterdayFormatted = this.formatDate(yesterday);
      this.timeVal = [yesterdayFormatted, todayFormatted]
    },
    // 接口获取统计数据
    requestForGetStaticData () {
      const postPamars = {
        startDay: this.timeVal[0],
        endDay: this.timeVal[1]
      }
      getStatisticsByDate(postPamars).then(async res => {
        const { data } = res;
        if (data) {

          const xData = [];
          const userData = [];
          const answerData = [];
          for (let i = 0; i < data.length; i++) {
            const item = data[i];
            xData.push(item.date);
            userData.push(item.newUserCount);
            answerData.push(item.totalAnswerCount);
          }
          this.options.xAxis.data = xData;
          this.options.series = [{
            name: '新增用户数',
            type: 'line',
            stack: 'Total',
            data: userData
          },
          {
            name: '调查问卷',
            type: 'line',
            stack: 'Total',
            data: answerData
          }];
        }
        this.myChart.setOption(this.options);
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.divBox {
  position: relative;
  width: 100%;
  height: 500px;
  padding: 20px;
}

.echarts-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.date-picker-form-box {
  position: absolute;
  top: 20px;
  right: 40px;
}
</style>
